<template>
  <div class="banner_wrap">
    <swiper class="mybanner" :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in bannerList" :key="index">
        <img :src="item.imgUrl" alt="" />
      </swiper-slide>

      <!-- 圆点 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 前 -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <!-- 后 -->
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <div v-if="shownav" class="banner_cate" @mouseleave="cateFlag = false">
      <div class="cate_wrap">
        <ul class="cate_list">
          <li
            @mouseenter="changeData(index)"
            class="cate_one"
            v-for="(item, index) in navList"
            :key="index"
          >
            <p>{{ item.name }}</p>
            <span class="one">{{ item.children[0].name }}</span>
            <span v-if="item.children.length > 1">{{
              item.children[1].name
            }}</span>
          </li>
        </ul>
      </div>
      <!-- 分类商品部分 -->
      <div
        @mouseenter="cateFlag = true"
        @mouseleave="cateFlag = false"
        class="cate_prodcut"
        v-if="cateFlag"
      >
        <h1>推荐商品</h1>
        <div class="product_list">
          <div
            class="pro_one"
            v-for="(item, index) in cateProList"
            @click="turnInfo(item.id)"
            :key="index"
          >
            <img :src="item.picture" alt="" />
            <div>
              <p class="pname">{{ item.name.substr(0, 8) + '...' }}</p>
              <span class="pdes">{{ item.desc.substr(0, 8) + '...' }}</span>
              <p class="price">￥{{ item.price }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { _getBanner, _getIndexNav } from '../../../api/home'

export default {
  props: {
    shownav: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      cateFlag: false,
      cateProList: [], //二级分类商品数据
      bannerList: [], //轮播图数据
      navList: [], //准备接受兄弟传参的分类数据
      swiperOption: {
        loop: true, //是否循环轮播
        speed: 1000, //切换速度
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        // 自动轮播
        autoplay: {
          delay: 2000
        },
        effect: 'fade',
        // 左右切换
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true // 允许点击小圆点跳转
        }
      }
    }
  },
  created () {
    this.getBanner()
    this.getNav()
  },
  methods: {
    // 获取分类数据接口
    async getNav () {
      var res = await _getIndexNav()
      this.navList = res.data.result
    },
    // 分类商品跳转详情页
    turnInfo (id) {
      this.$router.push({
        name: 'detail',
        query: {
          id: id
        }
      })
    },
    changeData (index) {
      //鼠标经过过滤出不同的数据
      this.cateFlag = true
      this.cateProList = this.navList[index].goods
    },

    // 获取banner图解耦
    async getBanner () {
      var res = await _getBanner()
      console.log(res)
      this.bannerList = res.data.result
    }
  }
}
</script>
<style lang="less" scoped>
.banner_wrap {
  position: relative;
  width: 1240px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  .mybanner {
    width: 1240px;
    height: 500px;
    .swiper-slide {
      width: 1240px;
      height: 500px;
      img {
        width: 1240px;
        height: 500px;
      }
    }
  }
}
.swiper-pagination-bullet .swiper-pagination-bullet-active {
  background: white !important;
}
.cate_wrap {
  width: 250px;
  height: 500px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
}
.cate_list {
  width: 250px;
  height: 500px;
}
.cate_one {
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  display: flex;
  padding-left: 20px;
  box-sizing: border-box;
  &:hover {
    background: #27bb9a;
  }
  // 鼠标经过一级菜单 二级菜单显示

  p {
    font-size: 18px;
  }
  .one {
    margin: 0 10px;
  }
}
.banner_cate {
  width: 1240px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 888;
  display: flex;
  .cate_prodcut {
    flex: 1;
    height: 500px;
    background: rgba(255, 255, 255, 0.7);
  }
}
.product_list {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .pro_one {
    width: 30%;
    height: 130px;
    background: white;
    display: flex;
    margin-top: 15px;
    img {
      width: 120px;
      height: 120px;
      margin-left: 10px;
      margin-top: 5px;
    }
    > div {
      .pname {
        margin-top: 20px;
        fon-size: 20px;
      }
      span {
        color: #ccc;
        font-size: 15px;
        margin: 10px 0;
      }
      .price {
        color: red;
        font-size: 20px;
      }
    }
  }
}
</style>
